<template>
  <div class="student-manage">
    <data-show :table-list="tableList" :table-key="tableKey" @call-parent="Delete">
      <template v-slot:Edit="slotProps">
        <el-button type="primary" round size="small" @click="Edit(slotProps.row)">
          详情
        </el-button>
      </template>
    </data-show>
  </div>

  <!-- 详情弹窗 -->
  <el-dialog title="学生详情" v-model="dialogVisible" width="50%" :close-on-click-modal="true"
    :close-on-press-escape="true">
    <div v-if="studentDetail">
      <p><strong>姓名：</strong>{{ studentDetail.name }}</p>
      <p><strong>性别：</strong>{{ studentDetail.sex }}</p>
      <p><strong>昵称：</strong>{{ studentDetail.username }}</p>
      <p><strong>专业：</strong>{{ studentDetail.major || '未填写' }}</p>
      <p><strong>学分：</strong>{{ studentDetail.credits || '无' }}</p>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script>
// eslint-disable-next-line
/* eslint-disable */

import DataShow from "./DataShow";
import { StudentManageList, deleteStudent, queryStudent } from '@/network/admin'
import { msg } from '@/assets/js/InformMsg'
export default {
  name: "StudentManage",
  components: {
    DataShow
  },
  data() {
    return {
      tableKey: [
        { title: '序号', value: 'stu_id' },
        { title: '姓名', value: 'name' },
        { title: '性别', value: 'sex' },
        { title: '昵称', value: 'username' },
        { title: '学院', value: 'college' },
        { title: '专业 ', value: 'major' },
        { title: '学分 ', value: 'credits' },
      ],
      tableList: [],
      dialogVisible: false,
      studentDetail: null
    }
  },
  mounted() {
    this.queryStudentManageList()
  },
  methods: {
    queryStudentManageList() {
      StudentManageList().then(res => {
        this.tableList = res.data.data
      })
    },

    Delete(row) {
      let delObj = {
        stu_id: row.stu_id
      }
      deleteStudent(delObj).then(res => {
        if (res.data.code === 200) {
          msg('success', res.data.msg)
          this.queryStudentManageList()
        } else {
          msg('error', res.data.msg)
        }
      })
    },

    Edit(row) {
      console.log(row)
      let reqObj = {
        stu_id: row.stu_id
      }
      queryStudent(reqObj).then(res => {
        console.log(res.data.data)
        this.studentDetail = res.data.data;
        this.dialogVisible = true;
        
      })

    },

  }
}
</script>

<style scoped></style>
